<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 订阅计划
const plans = ref([
  {
    id: 'basic',
    name: '基础版',
    price: 0,
    period: '永久免费',
    features: [
      '基础聊天功能',
      '发送文本消息',
      '最多5个联系人'
    ],
    recommended: false,
    buttonText: '当前方案'
  },
  {
    id: 'pro',
    name: '专业版',
    price: 9.99,
    period: '月',
    features: [
      '全部基础功能',
      '无限联系人',
      '高级主题',
      '消息撤回功能',
      '聊天记录云存储'
    ],
    recommended: true,
    buttonText: '升级到专业版'
  },
  {
    id: 'premium',
    name: '高级版',
    price: 19.99,
    period: '月',
    features: [
      '全部专业版功能',
      '专属客服',
      '优先响应',
      '自定义主题',
      '高级数据分析'
    ],
    recommended: false,
    buttonText: '升级到高级版'
  }
])

// 当前用户订阅状态
const currentPlan = ref('basic')

// 选择订阅计划
const selectPlan = (planId) => {
  if (planId === currentPlan.value) {
    return
  }
  
  // 这里应该集成支付系统
  alert(`您将升级到${plans.value.find(p => p.id === planId)?.name}，请完成支付。`)
  
  // 模拟支付成功
  setTimeout(() => {
    currentPlan.value = planId
    localStorage.setItem('subscriptionPlan', planId)
    alert('升级成功！')
  }, 1000)
}

// 返回聊天
const goToChat = () => {
  router.push('/chat')
}
</script>

<template>
  <div class="subscription-container">
    <header class="subscription-header">
      <h1>选择适合您的订阅方案</h1>
      <p>解锁更多高级功能，提升您的聊天体验</p>
    </header>
    
    <main class="subscription-main">
      <div class="plans-grid">
        <div 
          v-for="plan in plans" 
          :key="plan.id"
          class="plan-card" 
          :class="{
            'current-plan': plan.id === currentPlan.value,
            'recommended': plan.recommended
          }"
        >
          <div class="plan-header">
            <h2>{{ plan.name }}</h2>
            <div v-if="plan.recommended" class="recommended-badge">推荐</div>
          </div>
          
          <div class="plan-price">
            <span class="price-amount">¥{{ plan.price.toFixed(2) }}</span>
            <span v-if="plan.price > 0" class="price-period">/{{ plan.period }}</span>
          </div>
          
          <ul class="plan-features">
            <li v-for="(feature, index) in plan.features" :key="index" class="feature-item">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <polyline points="20 6 9 17 4 12"></polyline>
              </svg>
              {{ feature }}
            </li>
          </ul>
          
          <button 
            class="plan-button"
            :class="{
              'current-button': plan.id === currentPlan.value,
              'primary-button': plan.recommended && plan.id !== currentPlan.value,
              'secondary-button': !plan.recommended && plan.id !== currentPlan.value
            }"
            @click="selectPlan(plan.id)"
          >
            {{ plan.buttonText }}
          </button>
        </div>
      </div>
      
      <div class="subscription-footer">
        <button class="back-button" @click="goToChat">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <polyline points="15 18 9 12 15 6"></polyline>
          </svg>
          返回聊天
        </button>
      </div>
    </main>
  </div>
</template>

<style scoped>
.subscription-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f8fafc;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.subscription-header {
  text-align: center;
  padding: 32px 20px;
  background: white;
  border-bottom: 1px solid #e2e8f0;
}

.subscription-header h1 {
  font-size: 28px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 8px 0;
}

.subscription-header p {
  font-size: 16px;
  color: #64748b;
  margin: 0;
}

.subscription-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 20px;
  gap: 32px;
}

.plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  max-width: 1200px;
  width: 100%;
}

.plan-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  position: relative;
  border: 2px solid transparent;
}

.plan-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.plan-card.current-plan {
  border-color: #3b82f6;
  background-color: #f0f9ff;
}

.plan-card.recommended {
  border-color: #10b981;
  background-color: #f0fdf4;
}

.plan-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.plan-header h2 {
  font-size: 20px;
  font-weight: 600;
  color: #1e293b;
  margin: 0;
}

.recommended-badge {
  background-color: #10b981;
  color: white;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 12px;
}

.plan-price {
  margin-bottom: 24px;
}

.price-amount {
  font-size: 32px;
  font-weight: 700;
  color: #1e293b;
}

.price-period {
  font-size: 16px;
  color: #64748b;
  font-weight: 400;
}

.plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
}

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
  font-size: 14px;
  color: #475569;
  line-height: 1.5;
}

.feature-item svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: #10b981;
}

.plan-button {
  width: 100%;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.current-button {
  background-color: #f1f5f9;
  color: #64748b;
  cursor: not-allowed;
}

.primary-button {
  background-color: #10b981;
  color: white;
}

.primary-button:hover {
  background-color: #059669;
  transform: translateY(-1px);
}

.secondary-button {
  background-color: #3b82f6;
  color: white;
}

.secondary-button:hover {
  background-color: #2563eb;
  transform: translateY(-1px);
}

.subscription-footer {
  width: 100%;
  max-width: 1200px;
}

.back-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #64748b;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s ease;
}

.back-button:hover {
  background-color: #f1f5f9;
  color: #3b82f6;
  border-color: #cbd5e1;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .plans-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
  }
  
  .subscription-header h1 {
    font-size: 24px;
  }
  
  .subscription-header p {
    font-size: 14px;
  }
}
</style>